<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>运动管理</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="./css/sm.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/nav-bottom.css">
    <link rel="stylesheet" href="./css/sleepAndMood.css">
    <link rel="stylesheet" href="css/circle.css">

</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a class="left bar-nav-mt1 back" href="#">
                <img src="./img/back.png" alt="">
            </a>
            <h2 class="title color-white">运动管理</h2>
            <a href="#" class="right bar-nav-mt2 right-more">
                <img src="./img/more.png" alt="">
            </a>

            <div class="more-setting" tabindex="-1">
                <div id="triangle-up"></div>
                <div class="more-setting-div">
                    <a href="#" class="more-setting-div-content">
                        <img src="./img/right-add.png" alt="">
                        <span>
                            添加成员
                        </span>
                    </a>
                    <a href="#" class="more-setting-div-content">
                        <img src="./img/right-currency.png" alt="">
                        <span>
                            通用
                        </span>
                    </a>
                    <a href="#" class="more-setting-div-content" style="border-bottom: none">
                        <img src="./img/right-share.png" alt="">
                        <span>
                            分享
                        </span>
                    </a>
                </div>
            </div>
        </header>
        <nav class="my-bar bar-tab">
            <div class="row">
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-home"></div>
                        <span>首页</span>
                    </a>
                </div>
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-mess"></div>
                        <span>消息</span>
                    </a>
                </div>
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-discover"></div>
                        <span>发现</span>
                    </a>
                </div>
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-me"></div>
                        <span>我</span>
                    </a>
                </div>
            </div>
        </nav>

        <div class="content">
            <div class="row">
                <div class="col-50">
                    <p><a href="#" class="button button-fill sport-monitor-btn">绑定监测设备</a></p>
                </div>
                <div class="col-50">
                    <a href="" class="right sport-monitor-text">
                        购买监测设备
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="my-col-33">
                    <div class="jqm-round-wrap">

                        <div class="jqm-round-bg"></div>

                        <canvas id="jqm-round-sector0" class="jqm-round-sector"></canvas>

                        <div class="jqm-round-circle"><p style="display: none">70%</p>
                            <h3>30</h3>
                            <span>分钟</span>
                        </div>

                    </div>
                    <p>跑步计划</p>

                </div>
                <div class="my-col-33">
                    <div class="jqm-round-wrap">

                        <div class="jqm-round-bg"></div>

                        <canvas id="jqm-round-sector1" class="jqm-round-sector"></canvas>

                        <div class="jqm-round-circle"><p style="display: none">40%</p>
                            <h3>10</h3>
                            <span>分钟</span>
                        </div>

                    </div>
                    <p>下蹲计划</p>
                </div>
                <div class="my-col-33">
                    <a href="" class="mycircle">
                        <img src="./img/circle.png" alt="">
                    </a>
                    <p>添加新计划</p>
                    <a href="" class="jqm-round-wrap-text">
                        <img src="./img/plus.png" alt="">
                    </a>
                </div>
            </div>

            <div class="content-block-title my-content-block-title">运动计划进程</div>
            <div class="list-block">
                <ul>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">
                                <img src="./img/next.png" alt="">
                                <div class="item-tag">
                                    <h2>开始跑步</h2>
                                </div>
                            </div>
                            <div class="item-after">
                                <h2>21:00</h2>
                            </div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">
                                <img src="./img/next.png" alt="">
                                <div class="item-tag">
                                    <h2>开始下蹲</h2>
                                </div>
                            </div>
                            <div class="item-after">
                                <h2>10分钟</h2>
                            </div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">
                                <img src="./img/next.png" alt="">
                                <div class="item-tag">
                                    <h2>开始瑜伽</h2>
                                </div>
                            </div>
                            <div class="item-after">
                                <h2>20分钟</h2>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="my-bar-tab">
                <div class="row">
                    <div class="col-50">
                        <p><a href="#" class="button button-fill sport-monitor-btn">私人教练</a></p>
                    </div>
                    <div class="col-50">
                        <p><a href="#" class="button button-fill sport-monitor-btn">健康运动知识</a></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="js/zepto.min.js"></script>
<script src="js/sm.min.js"></script>
<script src="js/circle.js"></script>
<script src="js/index.js"></script>
<script>
    $.init();
</script>
</body>
</html>